
<template>
  <div style="" class="intent">
    <div class="" style="top: 0;position: absolute;height: 1px;background: #EFEFEF;width:100%"></div>
    <div class="" style="height: calc(100vh - 45px);overflow: hidden;display: flex;justify-content: space-between;flex-direction: column;">
      <div class="oy ">
        <div style="line-height: 43rpx " class="fz30 pl30 pt30 pb30 pr30  bfff">在售后流程中,若消费者利用规则谋取不当利益，您可以想平台举报,经平台核实举报属实后,将切实维护您的售后权益</div>
        <div style="line-height: 41rpx" class="fz28 pl30 pt20 pb20 pr30 mt20 bfff">举报与平台核实流程 </div>
        <div style="height: 1px;background: #EFEFEF;width:100%"></div>
        <div class="bfff  pl30 pt30 pb30 ">
          <div class="fac">
            <div class="box fz26" style="left: -17rpx;">1</div>
            <div class="fz28 fw500 pl20 c333 lh1">商家提交举报</div>
          </div>
          <div class="ml20" style="border-left: 1rpx dashed #898989;height: 30rpx"></div>
          <div class="fac">
            <div class="box  fz26" style="left: -17rpx;">2</div>
            <div class="fz28 fw500 pl20 c333 lh1">平台核实</div>
          </div>
          <div class="ml20" style="border-left: 1rpx dashed #898989;height: 30rpx"></div>
          <div class="fac">
            <div class="box  fz26" style="left: -17rpx;">3</div>
            <div class="fz28 fw500  pl20 c333 lh1">核实完成（举报属实）</div>
          </div>
          <div style="line-height: 38rpx;color: #898989" class="pt10 pl40 pr30 ml20 fz28">部分情形,有商家自行处理，平台不做干预;部分情形，平台讲出面拒绝续爱飞着退款诉求;记录消费者不良行为，并回收其售后权益</div>
        </div>
        <div style="line-height: 41rpx" class="fz28 pl30 pt20 pb20 pr30 mt20 bfff">您遇到了什么问题 </div>
        <div style="height: 1px;background: #EFEFEF;width:100%"></div>
        <div class="bfff ">
          <uv-radio-group borderBottom labelColor="#333" activeColor="#DE0012" placement="column" v-model="form.delivery_id">
            <uv-radio v-for="(item1, index1) in [{title: '收货后恶意退款'},  {title: '退货异常'},{title: '其他问题场景'} ]" :label="item1.title" :key="index1" :name="item1.title">
              <div class="pt20 pl10 pb20 fz28">{{ item1.title }}</div>
            </uv-radio>
          </uv-radio-group>
        </div>
        <div style="line-height: 41rpx" class="fz28 pl30 pt20 pb20 pr30 mt20 bfff">请选择您要举报的问题类型 </div>
        <div class="bfff">
          <uv-radio-group labelColor="#333" activeColor="#DE0012" placement="column" v-model="form.delivery_id">
            <div style="border-top: 1px solid #efefef;" class="  " v-for="(item1, index1) in [{title: '收货后恶意退款'},  {title: '退货异常'},{title: '其他问题场景'} ]" :label="item1.title" :key="index1">
              <uv-radio :name="item1.title">
                <div class="pt20 pl10  fz28">{{ item1.title }}</div>
                <div style="line-height: 38rpx;color: #898989" class="fz26 pb20 pt10 pr30 pl10">消费者已收到货,反馈商品肉眼可见问题时,仅提供了黑图、模糊图片,或与购买商品无关图片等无法证明消费者表达的问题的凭证</div>
              </uv-radio>
            </div>
          </uv-radio-group>
        </div>
      </div>
      <button-lst bgColor="" text="提交" @submit="submitTap"></button-lst>
    </div>
  </div>
</template>
<script>

import { returnAddressAdd, returnAddressID, returnAddressEdit } from "@/api/merchant.js";
import commonButtonVue from "../components/commonButton.vue";
export default {
  components: {
    "button-lst": commonButtonVue,
  },
  data() {
    return {
      routeQuery: {},
      form: {},
      addressForm: {
        tel: null,
        name: null,
        address: '',
        provinceCityArea: ''
      },

      rules: {
        'provinceCityArea': { type: 'string', required: true, message: '请选择地区', trigger: ['blur', 'change'] },
        'address': { type: 'string', required: true, message: '请填写详细地址', trigger: ['blur', 'change'] },
        'name': { type: 'string', required: true, message: '请填写收件人', trigger: ['blur', 'change'] },
        'tel': {
          type: 'string', required: true, message: '电话号码格式错误', trigger: ['blur'],
          validator: (rule, value, callback) => {
            return uni.$uv.test.mobile(value)
          }

        },
      },
      dpdzPopupForm: {}
    }
  },

  onLoad(options) {
    if (options) this.routeQuery = options
  },
  methods: {
    provinceCityAreaChange(item) {
      let { province, city, area, district } = item
      let provinceCityArea = (province.title ? province.title : '') + (city.title ? '/' + city.title : '') + (area.title ? '/' + area.title : '') + (district.title ? '/' + district.title : '')
      this.$set(this.addressForm, 'provinceCityArea', provinceCityArea)
      this.$set(this.addressForm, 'province', province.title)
      this.$set(this.addressForm, 'city', city.title)
      this.$set(this.addressForm, 'area', area.title)
      // this.$set(this.addressForm, 'district', district.title)
      this.dpdzPopupForm = JSON.parse(JSON.stringify(this.addressForm))
    },
    submitTap() {
      this.$refs.addressForm.validate().then(() => {
        let form = JSON.parse(JSON.stringify(this.addressForm))
        if (!form.area) return uni.$uv.toast('请选择省市区')
        form.province = form.province
        form.area = form.area
        form.city = form.city
        delete form.provinceCityArea
        delete form.district
        uni.showLoading({ title: '加载中', mask: true })
        if (this.routeQuery.id) {
          returnAddressEdit(form).then(res => {
            if (res.code === 200) {
              uni.hideLoading()
              uni.$uv.toast('编辑成功')
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 500);
            }
          })
        } else {
          returnAddressAdd(form).then(res => {
            if (res.code === 200) {
              uni.hideLoading()
              uni.$uv.toast('添加成功')
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 500);
            }
          })
        }
      })
    },

    initPage() {


    }
  }

}
</script>

<style lang="scss" scoped>
@import "../common.scss";
page {
  background-color: #f7f8f8;
  font-size: 28rpx;
  color: #333;
}

::v-deep .intent .uv-radio {
  align-items: first baseline !important;
  padding-left: 30rpx !important;
  padding-bottom: 0 !important;
}

::v-deep .intent .uv-border-bottom {
  border-color: #efefef !important;
}
::v-deep .intent .uv-radio.uv-border-bottom:last-child {
  border: none !important;
}
.box {
  width: 40rpx;
  height: 40rpx;
  min-height: 40rpx;
  max-height: 40rpx;
  min-width: 40rpx;
  max-width: 40rpx;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  top: 0;
  background: #fff;
  z-index: 1;
  border: 1rpx solid #898989;
  color: #898989;
  font-size: 24rpx;
  scale: 0.85;
}
</style>